<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="header_div">
        <div :class="Store.isCollapse ? 'header_div_1' : 'header_div_2'" style="margin-top: 1vh">
            <img src="../../../public/image/logo.png" alt="" srcset="" style="width: 40px;height: 30px;">
            <span v-if="!Store.isCollapse" style="font-size: 16px; color: #ccc;margin-left: 10px;">BIG
                CUTE</span>
        </div>

        <el-icon v-if="Store.isCollapse" @click="ChangisCollapse" style="font-size: 30px; margin-top: 1vh;">
            <Expand :value="Store.isCollapse" />
        </el-icon>
        <el-icon v-else @click="ChangisCollapse" style="font-size: 30px; margin-top: 1vh;">
            <Fold :value="Store.isCollapse" />
        </el-icon>

        <Breadcrumb2/>
        <div class="header_right">
            <el-icon size="20" @click="SearchIcon" style="cursor: pointer;">
                <Search />
            </el-icon>
            <el-icon size="20" @click="Reload" style="cursor: pointer;">
                <Refresh />
            </el-icon>
            <span style=" margin-top: 8px;">

                <el-tooltip class="box-item" effect="light" trigger="click" placement="bottom">
                    <template #content>
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="通知" name="first">
                                <ul style="font-size: 12px">
                                    <li v-for="(item, index) in ulList.list" :key=index><span
                                            class="list_icon1">通知</span> {{ item.title }}</li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="公告" name="second">
                                <ul style="font-size: 12px">
                                    <li v-for="(item, index) in ulList.list" :key=index><span
                                            class="list_icon2">公告</span> {{ item.title }}</li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="系统消息" name="third">
                                <ul style="font-size: 12px">
                                    <li v-for="(item, index) in ulList.list" :key=index><span
                                            class="list_icon3">系统消息</span> {{ item.title }}</li>
                                </ul>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <el-icon size="20" style="cursor: pointer; ">
                        <Bell />
                    </el-icon>
                </el-tooltip>
            </span>

            <el-icon size="24" @click="BigScreen" style="cursor: pointer;" v-if="!isFullScreen">
                <FullScreen />
            </el-icon>

            <el-icon v-else size="24" style="cursor: pointer;" @click="OutBigScreen">
                <Rank />
            </el-icon>

            <el-tooltip content="<span>The content can be <strong>HTML</strong></span>" raw-content effect="light">
                <template #content>
                    <p style="font-size: 14px; cursor: pointer;" @click="GoPersonal" id="outbtn1"
                        @mouseenter="ChangeColor1" @mouseleave="ChangeColors1">个人中心</p>
                    <p style="font-size: 14px; margin-top:10px;  cursor: pointer;" @click="open" id="outbtn"
                        @mouseenter="ChangeColor" @mouseleave="ChangeColors">退出登录</p>
                </template>
                <img :src="imgSrc" style="width: 30px; height: 30px; border-radius: 15px;" />
            </el-tooltip>



            <span style="margin-left:0.1vw;">BIG CUTE</span>

            <el-icon @click="drawer = true" style="cursor: pointer;margin-left: 0.5vw;" size="24">
                <Setting />
            </el-icon>

        </div>



        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <span>Hi there!</span>
        </el-drawer>

        <el-dialog v-model="dialogTableVisible" width="800">
            暂无搜索结果
        </el-dialog>


    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useStore } from '@/stores/login';
import type { TabsPaneContext } from 'element-plus'
import { ulList } from '@/utils/Mock'
import screenfull from "screenfull"
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import Breadcrumb2 from '@/components/Breadcrumb2/index.vue'
const router = useRouter()


const drawer = ref(false)
const dialogTableVisible = ref(false)
const shows = ref(true)
const activeName = ref('first')
const Store = useStore()
const isFullScreen = ref(screenfull.isEnabled && screenfull.isFullscreen);
console.log(isFullScreen.value, 'isFullScreen');
const imgSrc = `https://ts1.cn.mm.bing.net/th/id/R-C.12bba6f72ade2c12db61338c596cc623?rik=Wc%2ffvOwFtlKJDA&riu=http%3a%2f%2fimg.crcz.
com%2fallimg%2f202002%2f12%2f1581507061495683.jpg&ehk=GRpynVWlojNkbDDlCVUKM%2feDD76Req3VVUdwqPktpsA%3d&risl=&pid=ImgRaw&r=0`;

onMounted(() => {
    screenfull.on('change', () => {
        isFullScreen.value = screenfull.isFullscreen;
    });
});
onUnmounted(() => {
    screenfull.off('change');
});

const ChangisCollapse = () => {
    Store.ChangisCollapse()
}
// 退出登录
const OutLogin = () => {
    localStorage.removeItem('token')
    window.location.href = '/login'
}
// 控制屏幕的函数
const toggleFullScreen = () => {
    if (screenfull.isEnabled) {
        screenfull.toggle()
            .then(() => {
                isFullScreen.value = true;
            })
            .catch(() => {
                console.error('全屏请求失败');
            });
    } else {
        console.error('浏览器不支持全屏API');
    }
};

// 进入全屏
const BigScreen = () => {
    shows.value = false
    toggleFullScreen()
}
// 搜索
const SearchIcon = () => {
    dialogTableVisible.value = true
}

// 退出全屏
const OutBigScreen = () => {
    shows.value = true
    toggleFullScreen()
}

// 确认退出框
const open = () => {
    ElMessageBox.confirm(
        '你确定要退出吗',
        '确认退出框',
        {
            confirmButtonText: '确认退出',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功',
            })
            OutLogin()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退出',
            })
        })
}


const Reload = () => {
    location.reload()
}

const ChangeColor = () => {
    const outbtn = document.querySelector('#outbtn')
    outbtn.style.color = '#fff'
    outbtn.style.backgroundColor = 'skyblue'
}
const ChangeColors = () => {
    const outbtn = document.querySelector('#outbtn')
    outbtn.style.color = '#000'
    outbtn.style.backgroundColor = '#fff'
}
const ChangeColor1 = () => {
    const outbtn1 = document.querySelector('#outbtn1')
    outbtn1.style.color = '#fff'
    outbtn1.style.backgroundColor = 'skyblue'
}
const ChangeColors1 = () => {
    const outbtn1 = document.querySelector('#outbtn1')
    outbtn1.style.color = '#000'
    outbtn1.style.backgroundColor = '#fff'
}
const GoPersonal = () => {
    router.push('/home/IndividualCenter/AboutMe')
}
</script>

<style>
.header_div {
    line-height: 3vh;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.header_right {
    height: 100%;
    width: 14vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
}

.header_div_1 {
    width: 4.3vw;
    height: 100%;
    display: flex;
}

.header_div_2 {
    width: 9.4vw;
    height: 100%;
    display: flex;
}

.demo-tabs {
    width: 20vw;
    background: #fff;
    z-index: 999;

}

.demo-tabs ul li {
    line-height: 40px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;

}

.list_icon1 {
    color: #fa4a1e;
    background: rgba(250, 74, 30, 0.0784313725);
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 5px;
}

.list_icon2 {
    color: #e98065;
    background: rgba(250, 74, 30, 0.0784313725);
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 5px;
}

.list_icon3 {
    color: blue;
    background: skyblue;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 5px;
}
ul>li{

width: 100%; /* 或其他你需要的宽度 */  
  white-space: nowrap; /* 防止文本换行 */  
  overflow: hidden; /* 隐藏超出容器的内容 */  
  text-overflow: ellipsis; /* 用省略号表示被隐藏的内容 */ 
}
</style>